<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" @close="$emit('update:visible',false)" width="40%">
    <!--checkType 1 查看详情 2 编辑-->
    <div class="dialog_conwrap">
      <el-form :model="editForm" label-width="100px" :rules="editFormRules" ref="editForm">
        <el-form-item label="账户名" prop="account">
          <el-input v-model="editForm.account" auto-complete="off" placeholder="填写账户名"></el-input>（用于登入后台）
        </el-form-item>
        <el-form-item label="姓名" prop="realname">
          <el-input v-model="editForm.realname" auto-complete="off" placeholder="填写姓名"></el-input>
        </el-form-item>
        <el-form-item label="年段" prop="section_id">
          <el-select v-model="editForm.section_id" placeholder="请选择年段" @change="sectionChange">
            <el-option :label="item.section_name" :value="item.id" v-for="(item, index) in sectionList"
                       :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="class_id">
          <el-select v-model="editForm.class_id" placeholder="请选择班级">
            <el-option :label="item.class_name" :value="item.id" v-for="(item, index) in classesList"
                       :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份" prop="role">
          <el-select v-model="editForm.role" placeholder="请选择用户身份">
            <el-option :label="item.name" :value="item.id" v-for="(item, index) in role" :key="index"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible=false" size="small">取消</el-button>
      <el-button type="primary" size="small" @click="formCheck">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import {pagination, tableoption} from '@/utils/util.js'
  import api from '@/utils/api.js'

  export default {
    name: 'Dialog',
    props: ['visible', 'eidtOption', 'checkType'],
    watch: {
      visible () {
        if (this.visible) {
          this.classList()
          this.editForm.account = this.eidtOption.account // 账户
          this.editForm.realname = this.eidtOption.realname // 真实姓名
          // checkType 2 编辑 3 添加
          if (this.checkType === 2) {
            this.editForm.id = this.eidtOption.id
            this.editForm.class_id = this.eidtOption.class_id.id // 班级
            this.editForm.role = this.eidtOption.role //  身份
            this.editForm.section_id = this.eidtOption.section_id.id // 年段
            this.classesList = this.classesListNew[this.eidtOption.section_name]
            this.title = '编辑详情'
          } else if (this.checkType === 3) {
            this.title = '添加用户'
          }
          this.roleFn()
        }
        this.dialogVisible = this.visible
      }
    },
    data () {
      return {
        title: null,
        dialogVisible: null,
        editForm: {
          account: '',
          class_id: '',
          realname: '',
          section_id: '',
          role: ''
        },
        // 编辑界面数据
        editFormRules: {
          account: [
            {required: true, message: '请填写账户名', trigger: 'blur'}
          ],
          realname: [
            {required: true, message: '请填写姓名', trigger: 'blur'}
          ],
          class_id: [
            {required: true, message: '请选择年段', trigger: 'blur'}
          ],
          section_id: [
            {required: true, message: '请选择班级', trigger: 'blur'}
          ],
          role: [
            {required: true, message: '请选择身份', trigger: 'blur'}
          ]
        },
        classesListNew: [],
        sectionList: [],
        classesList: [],
        role: [],
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        }
      }
  },
    created () {
      // this.classList()
    },
    methods: {
      // from验证
      formCheck () {
        let _self = this
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            console.log('submit!')
            this.saveSubmit()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      roleFn () {
        this.$post(this.api.role.select, {
          p: this.page.pageindex
        }).then((response) => {
          if (response.code === 0) {
            this.role = response.list
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 编辑提交信息
      saveSubmit () {
        let url = api.admin_user_add
        if (this.checkType === 2) {
          url = api.admin_user_edit
        }
        this.$post(url, this.editForm).then((response) => {
          if (response.code === 0) {
            this.$message({
              message: '编辑成功',
              type: 'success'
            })
            this.$emit('getevents')
            this.dialogVisible = false
            this.$refs['editForm'].resetFields()
          } else {
            console.log('请求失败')
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 获取年段班级信息
      classList () {
        // 年段
        this.$fetch(api.user_sectionindex, {p: this.page.pageindex}).then((response) => {
          if (response.code === 0) {
            this.sectionList = response.list.data
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
        // 班级
        this.$fetch(api.user_classesindex, {p: this.page.pageindex}).then((response) => {
          if (response.code === 0) {
            let array_ = {}
            for (let i in response.list.data) {
              let new_array = array_[response.list.data[i].section_id] || []
              new_array.push(response.list.data[i])
              array_[response.list.data[i].section_id] = new_array
            }
            this.classesListNew = array_
            console.log('班级信息:', array_)
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      sectionChange (val) {
        for (let i in this.sectionList) {
          if (this.sectionList[i].id === val) {
            this.classesList = this.classesListNew[this.sectionList[i].section_name]
            this.classesvalue = ''
            return
          }
        }
      }
    }
  }
</script>

